<template>
  <view class="mt-[4%] px-[4%] mb-[3%]">
    <view
      class="text-main font-bold"
      :class="isBigSreen ? 'text-2main' : 'text-xl'"
    >
      <view class="flex items-center">
        <view
          class="bar"
          :class="isBigSreen ? 'h-[54rpx]' : 'h-[34rpx]'"
        ></view>
        <text class="pl-[22rpx]">第{{ step }}步 {{ title }}</text>
      </view>
      <view class="mt-3 relative">
        <view
          class="w-full bg-white rounded-[60rpx]"
          :class="isBigSreen ? 'h-[24rpx]' : 'h-[12rpx]'"
        ></view>
        <view
          :style="{ width: stepN + '%' }"
          class="blue rounded-[60rpx] absolute left-0 top-0"
          :class="isBigSreen ? 'h-[24rpx]' : 'h-[12rpx]'"
        ></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
  step: {
    type: Number,
    default: 1,
  },
  title: {
    type: String,
    default: "",
  },
});
const stepN = computed(() => (props.step == 3 ? 100 : props.step * 33.33));
const isBigSreen = computed(() => {
  return uni.getSystemInfoSync().windowWidth > 500;
});
</script>
<style scoped lang="scss">
.bar {
  width: 10rpx;
  background: #2567ec;
  border-radius: 52rpx 52rpx 52rpx 52rpx;
}
.blue {
  background: linear-gradient(270deg, #29a8ef 0%, #2567ec 100%);
}
</style>
